<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />	
		<title>${bdictionarySPageInfo[0].name }</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/public.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/font-awesome.css" />
		<link rel="stylesheet" href="${pageContext.request.contextPath }/resources/wap/css/swiper.min.css" />
	</head>
	<body>
		<!-- logo和搜索框 -->
		<div class="tb-logo">
	    	<span class="float-l pic" id="toIndex"><img src="${pageContext.request.contextPath }/resources/wap/img/logo.png" alt="" /></span>
	    	<div class="tb-srch">
		    	<form action="${pageContext.request.contextPath }/wap/search.html" id="searchForm">
			    	<span class="shuru">
			    		<input id="search-input" type="text" name="name" id="name" value="${name1}" />
			    	</span>
		    		<span class="fa fa-search btn" aria-hidden="true" id="search"></span>
		    	</form>
		    </div>
		    
		  
	    </div>	 
	   <!-- 导航栏 -->
	    <ul class="list-tb" id="channel-style">
	    	<li >首页</li>
	    	<li type="CHANNEL" code="MOVIE">电影</li>
	    	<li type="CHANNEL" code="TVPLAY">电视剧</li>
	    	<li type="CHANNEL" code="CARTOON">动漫</li>
	    </ul>
	   <!-- 条件检索 -->
	    <div class="js">
	    	<span style="line-height: 22px;">剧集检索</span>
	    	<span class="btn float-r">筛选</span>
	    	<div class="content">
	    		<div class="bd">
	    			<div class="mc">
	    				地区:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container ss">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div>
			                    <c:forEach items="${requestScope.address_list }" var="item" varStatus="i">
			                    	<div class="swiper-slide" code="${item.code}" type="${item.type}" >
			                    		${item.name}
			                    	</div>
			                    </c:forEach>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				类型:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div>
			                    <c:forEach items="${requestScope.channels_list}" var="item" varStatus="i">
			                    	 <div class="swiper-slide " id = "seriesType" code="${item.code}" type="${item.type}">
			                    	 	${item.name}
			                    	 </div>
			                    </c:forEach>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				年份:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                <div class="swiper-slide chose">全部</div>
			                    <c:forEach items="${requestScope.year_list}" var="item" varStatus="i">
			                    	 <div class="swiper-slide " code="${item.code}" type="${item.type}">
			                    	 	${item.name}
			                    	 </div>
			                    </c:forEach>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				清晰度:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose">全部</div> 
								 <c:forEach items="${requestScope.clear_list}" var="item" varStatus="i">
			                    	 <div class="swiper-slide " code="${item.code}" type="${item.type}">
			                    	 	${item.name}
			                    	 </div>
			                    </c:forEach>
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="bd">
	    			<div class="mc">
	    				排序:
	    			</div>
	    			<div class="js-list">
				    	<div class="swiper-container">
			                <div class="swiper-wrapper text-center active-tab">
			                    <div class="swiper-slide chose four-word" type="sorts" sort="like_count">最具人气</div> 
								<div class="swiper-slide  four-word" type="sorts" sort="publish_time">最新发布</div>								
			                </div>
			            </div>
	                </div>
	    		</div>
	    		<div class="btnx">
	    			<span class="cz">重置</span>
	    			<span class="qd" onclick="loadDataRebuild()">确定</span>
	    		</div>
	    	</div>
	    </div>
	    <!-- 根据条件筛选剧集数据生成 -->
	    <div class="bd" >
	    	<ul class="film-ul width-half" id="series">
	    		
	    	</ul>
	    	<!-- 分页功能 -->
	    	<div class="cpage" >
		    	<div class="jz-data" onclick="loadData()">
		    		<input type="text" id="pagecount" style="display:none;" value="0"/>
		    		<span>数据加载中...</span>
		    	</div>
	    	</div>
	    </div>
	    <!-- 页脚 -->
	    <div class="footer">
	    	<div class="footer-bd">
	    		<p class="bq">
	    			Copyright © 2016 All Rights Reserved.
	    		</p>
	    	</div>
	    </div>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/wap/js/jquery-2.2.3.min.js" ></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/wap/js/bootstrap.min.js" ></script>
	    <script type="text/javascript" src="${pageContext.request.contextPath }/resources/wap/js/swiper.min.js" ></script>
	    
	    <script>
	    
		//上传筛选条件
		  //  $("#submitForm").click(loadData(obj));
			//点击logo回首页
			$("#toIndex").click(function(){
	    		 window.location.href="${pageContext.request.contextPath }/wap/index.html"; 
	    	  });   
            var flag=1;
            $('.js .btn').click(function(){
            	if(flag==1){
		            //执行方法;
		            $('.js .content').slideDown();
		            var mySwiper = new Swiper('.swiper-container',{
		                freeMode : true,
		                freeModeMomentum : false,
		                slidesPerView : 6,
		            });
		            $(".swiper-slide").click(function(){
		           	    $(this).addClass("chose").siblings().removeClass('chose');
		            });
		            flag=0;
		        }else{
		            //执行方法;
		            $('.js .content').slideUp();
		            flag=1;
		        }
            });
          

            $('.js .content .btnx .cz').click(function(){
                $('.active-tab').each(function(){
            	    $(this).children('div:first').addClass("chose").siblings().removeClass('chose');
		        });
            })
            
            $('.js .content .btnx .qd').click(function(){
             	if(flag==0){
             		$('.js .content').slideUp();
             	}		        
		    });
            window.onload = function () {
               var $activeHeight= $(".active-height").height();
                $(".active-content").height($activeHeight);
//                 loadData();

    			
				
            };     
	    </script>
	    <script type="text/javascript">
	    $(function() {
			//本地路径
			var prefix = "${pageContext.request.contextPath }";
			/****获取当前页面url携带的参数***/
			(function ($) {
                $.getUrlParam = function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                }
            })(jQuery);
			var xx = $.getUrlParam('code');
			/****根据获取的参数addClass****/
			var chose=$("#channel-style li");
			for (var a = 0; a < chose.length; a++) {
				var cho = chose.eq(a).attr("code");
				if (cho==xx) {
					chose.eq(a).addClass("li-choose");
				}
			}
			//.eq(1).attr("code")
// 			for ( is = 0; is < chose.length; is++) {
// 				var cho = chose[i];
// 				if (cho==xx) {
// 					$(this).addClass(".li-choose");
// 				}				
// 			}
			var i =1;
			/*****根据页面参数获取css和跳转链接*****/			
			$("#channel-style li").bind("click",function(){
				$(".li-choose").removeClass("li-choose");
				$(this).addClass("li-choose");
				
				var choose = $(this).index();
				if (choose==0) {
					window.location.href="${pageContext.request.contextPath }/wap/index.html";
				}else{
					search(loadDataRebuild());
				}
	    	});
			/***点击搜索事件****/
			$("#search").bind(
					"click",
					function() {
						var params = {};
						$("#pagecount").val($("#pagecount").val()-1+2);
						params["pageNo"] = $("#pagecount").val();
						//alert($("#pagecount").val());
						params["pSize"] = 8;
						params["kind"]="${requestScope.type}";
						params["name"] = $("#search-input").val();
						params["channel"]=$("#channel-style .li-choose").attr("code");
						 for (var i = 0; i< $(".chose").length; i++) {
							 	var item = $(".chose").eq(i);
				            	var type = item.attr("type");
				            	if(type=="AREA"){
				            		params["area"]=item.attr("code");
				            	}
				            	if(type=="DRAMA_TYPE"){
				    				params["type"]=item.attr("code");
				    			}
				            	if(type=="YEAR"){
				    				params["year"]=item.attr("code");
				    			}
				            	if(type=="VIDEO_CLARITY"){
				    				params["videoClarity"]=item.attr("code");
				    			}
				            	if(type=="sorts"){
				    				params["sort"]=item.attr("sort");
				    			}
							}
						search(prefix + "/wap/searchBSeries.html", params);
					});
			
			//条件查询
			var searchInput = '${name}';
			//加载页面
			$('#search').click();
			
			
			
			document.onkeypress = function(e) {
				var ev = document.all ? window.event : e;
				if (ev.keyCode == 13) {
					var searchVal = $("#search-input").val();
					if (searchVal != null && searchVal != "") {
						$('#search').click();
					}
				}
			};
		});
		
		/***通用的查询方法，在此用来载入页面时加载数据***/
		function search(url, params) {
			$.post(
							url,
							params,
							function(json) {
								$("#series li").remove();
								$("#pagecount").val(1);
								var data=eval(json);
								$(data).each(
												function(i, item) {
													var ind = "<li ";
														if((i+1)%5==0){
														ind+="class='li-none'";
														}
														ind+="><a href='${pageContext.request.contextPath }/wap/detail/show.html?seriesId="
															+ item.id
															+ "&setNum=1'>";
														
													ind+="<img src='${baseImgPath}"+item.poster+"' alt='"+item.name+"' /><p class='c-title'>"
													+ item.name
													//+ "</p><p class='c-word'>"
													//+ item.description
													+ "</p></a></li>";
													$("#series").append(ind);
													
												});
								if($('.bd .film-ul li').length>0){
								var shuH=$('.bd .film-ul li').width()*1.45;
								$('.bd .film-ul li img').height(shuH);
								
								}
								var tt=$(".c-title");
								if(tt.length%8!=0 || tt.length<8){	
									$(".cpage").hide();
								}else{
									$(".cpage").show();
								}
								var sum = json.length;
								$("#sums").html(sum);
							}, "json");
			return;
		}
	    
	    
	    
	    
	    
	    
	    /***************************分页的方法**************************/
        function loadData(){
			var params = {};
			var scount=0;
			$("#pagecount").val($("#pagecount").val()-1+2);
			params["pageNo"] = $("#pagecount").val();
			params["pSize"] = 8;
			params["name"] = $("#search-input").val();
			params["channel"]=$("#channel-style .li-choose").attr("code");
			 for (var i = 0; i< $(".chose").length; i++) {
				 	var item = $(".chose").eq(i);
	            	var type = item.attr("type");
// 	            	alert("第1debug节点");
	            	if(type=="AREA"){
	            		params["area"]=item.attr("code");
	            	}//alert("第2debug节点");
	            	if(type=="DRAMA_TYPE"){
	    				params["type"]=item.attr("code");
	    			}//alert("第3debug节点");
	            	if(type=="YEAR"){
	    				params["year"]=item.attr("code");
	    			}//alert("第4debug节点");
	            	if(type=="VIDEO_CLARITY"){
	    				params["videoClarity"]=item.attr("code");
	    			}//alert("第5debug节点");
	            	if(type=="sorts"){
	    				params["sort"]=item.attr("sort");
	    			}//alert("第6debug节点");
				}
			
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/wap/searchPage.html",
				data:params,
				success:function(data){
					$("#series").append(data);
					if($('.bd .film-ul li').length>0){
						var shuH=$('.bd .film-ul li').width()*1.45;
						$('.bd .film-ul li img').height(shuH);
						
					}
					var number = $("#pagecount").val();
					var tt=$(".c-title");
					var totelCount = "${requestScope.totalPageCount}";
					//debugger;
					if($(".end").length>0){	
						$(".cpage").hide();
					}else{
						$(".cpage").show();
					}
					$(".end").remove();
				}
			});
		}
	    
	    /********************条件检索使用的方法**************************/
       
 function loadDataRebuild(){
			var params = {};
			var scount=0;
			$("#pagecount").val(1);
			params["pageNo"] = $("#pagecount").val();
			//alert($("#pagecount").val());
			params["pSize"] = 8;
			params["name"] = $("#search-input").val();
			params["channel"]=$("#channel-style .li-choose").attr("code");
			 for (var i = 0; i< $(".chose").length; i++) {
				 	var item = $(".chose").eq(i);
	            	var type = item.attr("type");
	            	//alert("第1debug节点");
	            	if(type=="AREA"){
	            		params["area"]=item.attr("code");
	            	}//alert("第2debug节点");
	            	if(type=="DRAMA_TYPE"){
	    				params["type"]=item.attr("code");
	    			}//alert("第3debug节点");
	            	if(type=="YEAR"){
	    				params["year"]=item.attr("code");
	    			}//alert("第4debug节点");
	            	if(type=="VIDEO_CLARITY"){
	    				params["videoClarity"]=item.attr("code");
	    			}//alert("第5debug节点");
	            	if(type=="sorts"){
	    				params["sort"]=item.attr("sort");
	    			}//alert("第6debug节点");
				}
			// debugger;
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath}/wap/searchPage.html",
				data:params,
				success:function(data){
					$("#series li").remove();
					$("#series").append(data);
					if($('.bd .film-ul li').length>0){
						var shuH=$('.bd .film-ul li').width()*1.45;
						$('.bd .film-ul li img').height(shuH);
						
					}
					
					var number = $("#pagecount").val(1);
					//debugger;
					var tt=$(".c-title");
					//alert(1);
				//	alert($(".end").length);
//						alert(tt.length);
					if(tt.length%8!=0 || tt.length<8 || $(".end").length>0){	
						$(".cpage").hide();
					}else{
						$(".cpage").show();
					}
					$(".end").remove();
				}
			});
			//alert("这里是测试");
		}	    </script>
	</body>
</html>
